<template>
  <!-- 商品流转明细 商品转化明细 -->
  <div class="app-container" v-loading="loading">

    <div class="customTab customTabNew">
      <div class="tabs flex alc">
        <el-radio-group v-model="actived" @change="tabChange">
          <el-radio-button :label="1">回收订单</el-radio-button>
          <el-radio-button :label="2">库存商品</el-radio-button>
          <el-radio-button :label="3">销售订单</el-radio-button>
        </el-radio-group>
      </div>
    </div>
    <el-form :model="queryParams" ref="queryForm" :inline="true" class="zdy-form search-form-new" label-width="100px">

      <div v-if="actived===1">
        <!-- 回收订单 筛选条件 -->
        <!-- 回收类型 回收完成时间  回收单号 三方回收单号 回收渠道 回收人 回收单状态 回收售后状态 -->
        <el-form-item el-form-item label="店铺" prop="buyerTenantId" v-hasPermi="['searchTenantID']">
          <el-select v-model="queryParams.buyerTenantId" placeholder="请选择店铺" clearable filterable>
            <el-option v-for="dict in tenantList" :key="dict.tenantId" :label="dict.tenantName" :value="dict.tenantId" />
          </el-select>
        </el-form-item>
        <el-form-item label="回收状态" prop="orderStatus">
          <el-select v-model="queryParams.orderStatus" placeholder="请选择回收状态" clearable>
            <el-option v-for="(item,i) in huishouStatesMap" :key="i" :label="item.label" :value="i" />
          </el-select>
        </el-form-item>
        <el-form-item label="回收类型" prop="orderType">
          <el-select v-model="queryParams.orderType" placeholder="请选择回收类型" clearable>
            <el-option label="我的回收" :value="1" />
            <el-option label="竞价回收" :value="2" />
            <el-option label="自建回收单" :value="3" />
            <el-option label="C端竞价回收" :value="4" />
          </el-select>
        </el-form-item>
        <el-form-item label-width="70px" label="回收人" prop="buyerIdList">
          <el-select class="bumen" multiple collapse-tags filterable clearable v-model="queryParams.buyerIdList" placeholder="请选择回收人">
            <el-option v-for="(item ,key) in yuangongList" :key="key" :label="item.nickName" :value="item.userId" />
          </el-select>
        </el-form-item>
        <el-form-item label="回收渠道" prop="channel">
          <el-select filterable clearable v-model="queryParams.channel" placeholder="请选择回收渠道">
            <el-option v-for="(item ,key) in qudaoList" :key="key" :label="item.name" :value="item.name" />
          </el-select>
        </el-form-item>
        <el-form-item label="回收单号" prop="no">
          <el-input v-model="queryParams.no" placeholder="请输入回收单号" clearable />
        </el-form-item>
        <el-form-item label="回收三方单号" prop="otherNo">
          <el-input v-model="queryParams.otherNo" placeholder="请输入回收三方单号" clearable />
        </el-form-item>
        <el-form-item label="游戏账号" prop="accountNumber">
          <el-input v-model="queryParams.accountNumber" placeholder="请输入游戏账号" clearable />
        </el-form-item>
        <el-form-item label="游戏名称" prop="gameId">
          <el-select v-model="queryParams.gameId" placeholder="请选择游戏" clearable>
            <el-option v-for="dict in allGameList" :key="dict.id" :label="dict.name" :value="dict.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="创建时间" prop="">
          <el-date-picker clearable v-model="huishouCreatTimer" value-format="yyyy-MM-dd" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="商品状态" prop="gSaleState">
          <el-select filterable clearable v-model="queryParams.gSaleState" placeholder="请选择商品状态">
            <el-option v-for="(item ,key) in commonMaps.goodsStatusMap" :key="key" :label="item.name" :value="key" />
          </el-select>
        </el-form-item>
        <el-form-item label="销售状态" prop="sOrderStatus">
          <el-select v-model="queryParams.sOrderStatus" placeholder="请选择销售状态" clearable>
            <el-option v-for="(item,i) in commonMaps.orderStatusMapType" :key="i" :label="item.label" :value="i" />
          </el-select>
        </el-form-item>
      </div>
      <div v-if="actived===2">
        <!-- 商品相关 -->
        <el-form-item label="店铺" prop="tenantId" v-hasPermi="['searchTenantID']">
          <el-select v-model="queryParams.tenantId" placeholder="请选择店铺" clearable filterable>
            <el-option v-for="dict in tenantList" :key="dict.tenantId" :label="dict.tenantName" :value="dict.tenantId" />
          </el-select>
        </el-form-item>
        <el-form-item label="商品状态" prop="saleState">
          <el-select filterable clearable v-model="queryParams.saleState" placeholder="请选择商品状态">
            <el-option v-for="(item ,key) in commonMaps.goodsStatusMap" :key="key" :label="item.name" :value="key" />
          </el-select>
        </el-form-item>
        <el-form-item label="游戏" prop="gameId">
          <el-select filterable v-model="queryParams.gameId" placeholder="请选择游戏" clearable>
            <el-option v-for="dict in allGameList" :key="dict.id" :label="dict.name" :value="dict.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="发布人" prop="createIds">
          <el-select class="bumen" multiple collapse-tags filterable clearable v-model="queryParams.createIds" placeholder="请选择发布人">
            <el-option v-for="(item ,key) in yuangongList" :key="key" :label="item.nickName" :value="item.userId" />
          </el-select>
        </el-form-item>
        <el-form-item label="商品编号" prop="id">
          <el-input v-model="queryParams.id" placeholder="请输入商品编号" clearable />
        </el-form-item>
        <el-form-item label="游戏账号" prop="accountNumber">
          <el-input v-model="queryParams.accountNumber" placeholder="请输入游戏账号" clearable />
        </el-form-item>
        <el-form-item label="自编号" prop="thirdId">
          <el-input v-model="queryParams.thirdId" placeholder="请输入自编号" clearable />
        </el-form-item>
        <!-- <el-form-item label="关键字" prop="keyWord">
          <el-input v-model="queryParams.keyWord" placeholder="多个关键字用空格隔开" clearable />
        </el-form-item>
        <el-form-item label="三方ID" prop="outid" v-hasPermi="['goods:list:searchOtherID']">
          <el-input v-model="queryParams.outid" placeholder="请输入三方ID" clearable />
        </el-form-item> -->
        <!-- <el-form-item label="库存天数" prop="unsoldDays">
          <el-input-number :controls="false" v-model="queryParams.unsoldDays" placeholder="请输入库存天数" clearable />
        </el-form-item> -->
        <el-form-item label="是否代售" prop="ifself">
          <el-select v-model="queryParams.ifself" placeholder="请选择" clearable filterable>
            <el-option label="自营" :value="1" />
            <el-option label="代售" :value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="发布时间" prop="">
          <el-date-picker style="width: 300px;" clearable v-model="goodsCreatTimer" value-format="yyyy-MM-dd" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="销售状态" prop="sOrderStatus">
          <el-select v-model="queryParams.sOrderStatus" placeholder="请选择销售状态" clearable>
            <el-option v-for="(item,i) in commonMaps.orderStatusMapType" :key="i" :label="item.label" :value="i" />
          </el-select>
        </el-form-item>
      </div>
      <div v-if="actived===3">
        <!--销售相关 -->
        <el-form-item el-form-item label="店铺" prop="status" v-hasPermi="['searchTenantID']">
          <el-select v-model="queryParams.tenantId" placeholder="请选择店铺" clearable filterable>
            <el-option v-for="dict in tenantList" :key="dict.tenantId" :label="dict.tenantName" :value="dict.tenantId" />
          </el-select>
        </el-form-item>
        <el-form-item label="销售状态" prop="orderStatus">
          <el-select v-model="queryParams.orderStatus" placeholder="请选择销售状态" clearable>
            <el-option v-for="(item,i) in commonMaps.orderStatusMapType" :key="i" :label="item.label" :value="i" />
          </el-select>
        </el-form-item>
        <el-form-item label="订单类型" prop="orderType">
          <el-select v-model="queryParams.orderType" placeholder="请选择订单类型" clearable filterable>
            <el-option v-for="(item,key) in commonMaps.orderTypeMap" :key="key" :label="item.label" :value="key" />
          </el-select>
        </el-form-item>
        <el-form-item label="支付状态" prop="salePay">
          <el-select v-model="queryParams.salePay" placeholder="请选择支付状态" clearable filterable>
            <el-option label="已支付" :value="2" />
            <el-option label="未支付" :value="1" />
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="销售渠道" prop="saleChannel">
          <el-select v-model="queryParams.saleChannel" placeholder="请选择渠道" clearable filterable>
            <el-option v-for="(item,key) in qudaoList" :key="key" :label="item.name" :value="item.name" />
          </el-select>
        </el-form-item> -->
        <el-form-item label="买家名称" prop="saleChannel">
          <el-input v-model="queryParams.saleChannel" placeholder="请输入买家名称" clearable />
        </el-form-item>
        <el-form-item label="销售人" prop="saleUserId">
          <el-select filterable clearable v-model="queryParams.saleUserId" placeholder="请选择销售人">
            <el-option v-for="(item ,key) in yuangongList" :key="key" :label="item.nickName" :value="item.userId" />
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="供货人" prop="supplyChannel">
          <el-input v-model="queryParams.supplyChannel" placeholder="请输入供货人" clearable />
        </el-form-item> -->
        <el-form-item label="销售单号" prop="no">
          <el-input v-model="queryParams.no" placeholder="请输入销售单号" clearable />
        </el-form-item>
        <el-form-item label="三方销售单号" prop="otherNo">
          <el-input v-model="queryParams.otherNo" placeholder="请输入三方销售单号" clearable />
        </el-form-item>
        <!-- <el-form-item label="商品编号" prop="goodsId">
          <el-input v-model="queryParams.goodsId" placeholder="请输入商品编号" clearable />
        </el-form-item>
        <el-form-item label="游戏账号" prop="realAccountNumber">
          <el-input v-model="queryParams.realAccountNumber" placeholder="请输入游戏账号" clearable />
        </el-form-item>
        <el-form-item label="游戏名称" prop="gameId">
          <el-select v-model="queryParams.gameId" placeholder="请选择游戏" clearable>
            <el-option v-for="dict in allGameList" :key="dict.id" :label="dict.name" :value="dict.id" />
          </el-select>
        </el-form-item> -->
        <!-- <el-form-item label="备注" prop="remark">
          <el-input v-model="queryParams.remark" placeholder="请输入备注" clearable />
        </el-form-item> -->

        <el-form-item label="创建时间" prop="">
          <el-date-picker style="width: 300px;" clearable v-model="saleCreatTimer" value-format="yyyy-MM-dd" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="完成时间" prop="">
          <el-date-picker style="width: 300px;" clearable v-model="saleFinishTimer" value-format="yyyy-MM-dd" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
          </el-date-picker>
        </el-form-item>
      </div>

      <el-form-item class="btns">
        <el-button type="primary" icon="el-icon-search" @click="searchList">搜索</el-button>
        <el-button icon="el-icon-refresh" type="warning" plain @click="resetQuery">重置</el-button>
        <el-button icon="el-icon-download" type="warning" @click="openExportExl">导出 </el-button>

        <el-button style="margin-left: 10px" type="warning" icon="el-icon-setting" plain @click="headerSet">表头设置</el-button>
      </el-form-item>
    </el-form>
    <div class="table_box table_box_new" v-if="columnList&&columnList.length">
      <el-table :data="tableData.records" ref="tableRef" border height="calc(100vh - 430px)">
          <template v-for="column in columnList">
            <el-table-column :key="column.key" v-if="column.isShow" :label="column.label" :width="column.width" :min-width="column.minWidth" :prop="column.key" :sortable="column.sortable" :class-name="column.colClass||''">
              <template slot-scope="scope">
                <template v-if="column.key=='bOrderType'">
                  <span>
                    <el-tag type="warning" v-if="scope.row.bOrderType==3">自建订单</el-tag>
                    <el-tag type="warning" v-if="scope.row.bOrderType==2">竞价回收</el-tag>
                    <el-tag type="warning" v-if="scope.row.bOrderType==1">我的回收</el-tag>
                    <el-tag type="warning" v-if="scope.row.bOrderType==4">C端竞价回收</el-tag>
                  </span>
                </template>
                <template v-else-if="column.key=='bOrderStatus'">
                  <span v-if="scope.row.bOrderStatus">
                    <el-tag :type="commonMaps.backOrderStateMap[scope.row.bOrderStatus||1].type">{{commonMaps.backOrderStateMap[scope.row.bOrderStatus||1].label}}</el-tag>
                  </span>
                </template>
                <template v-else-if="column.key=='bIsAfter'">
                  <span v-if="scope.row.bIsAfter">
                    <el-tag v-if="scope.row.bIsAfter==2" type="warning">处理中</el-tag>
                    <el-tag v-if="scope.row.bIsAfter==3" type="success">已处理</el-tag>
                  </span>
                </template>
                <template v-else-if="column.key=='gIfself'">
                  <span v-if="scope.row.gIfself">
                    <el-tag type="success" v-if="scope.row.gIfself==1">自营</el-tag>
                    <el-tag type="danger" v-if="scope.row.gIfself==2">代售</el-tag>
                  </span>
                </template>
                <template v-else-if="column.key=='gSaleState'">
                  <span v-if="scope.row.gSaleState||scope.row.gSaleState===0">
                    <el-tag :type="
                      commonMaps.goodsStatusMap[scope.row.gSaleState]
                        ? commonMaps.goodsStatusMap[scope.row.gSaleState].type
                        : ''
                    ">{{
                      commonMaps.goodsStatusMap[scope.row.gSaleState]
                        ? commonMaps.goodsStatusMap[scope.row.gSaleState].name
                        : ""
                    }}</el-tag>
                  </span>
                </template>
                <template v-else-if="column.key=='sSourceScen'">
                  <span v-if="scope.row.sSourceScen">
                    {{scope.row.sSourceScen?commonMaps.orderSource[scope.row.sSourceScen].label:''}}
                  </span>
                </template>
                <template v-else-if="column.key=='sType'">
                  <div v-if="scope.row.sType">
                    <el-tag :type="commonMaps.orderJiaoyiTypeMap[scope.row.sType].type">{{commonMaps.orderJiaoyiTypeMap[scope.row.sType].label}}</el-tag>
                  </div>
                </template>
                <template v-else-if="column.key=='sOrderType'">
                  <div v-if="scope.row.sOrderType">
                    <el-tag :type="commonMaps.orderTypeMap[scope.row.sOrderType].type">{{commonMaps.orderTypeMap[scope.row.sOrderType].label}}</el-tag>
                  </div>
                </template>
                <template v-else-if="column.key=='sOrderStatus'">
                  <div v-if="scope.row.sOrderStatus">
                    <el-tag :type="commonMaps.orderStatusMapType[scope.row.sOrderStatus].type">{{commonMaps.orderStatusMapType[scope.row.sOrderStatus].label}}</el-tag>
                  </div>
                </template>
                <template v-else-if="column.key=='sSalePay'">
                  <div v-if="scope.row.sSalePay">
                    <el-tag type="success" v-if="scope.row.sSalePay==2">已支付</el-tag>
                    <el-tag type="danger" v-if="scope.row.sSalePay==1">未支付</el-tag>
                  </div>
                </template>
                <template v-else-if="column.key=='sAfterSaleState'">
                  <div v-if="scope.row.sAfterSaleState">
                    <span v-if="scope.row.sAfterSaleState">售后{{scope.row.sAfterSaleState?commonMaps.afterOrderStateMap[scope.row.sAfterSaleState]:''}} </span>
                  </div>
                </template>
                <template v-else-if="column.key=='bRemark'||column.key=='sRemark'||column.key=='gDes'">
                  <el-popover title="备注" trigger="hover"  placement="top-start">
                    <div class="popover-box">
                      {{ scope.row[column.key] }}
                    </div>
                    <div slot="reference"  class="zdy-des">{{ scope.row[column.key] }}</div>
                  </el-popover>
                </template>
                <template v-else>
                  <span>{{scope.row[column.key]||''}}</span>
                </template>
              </template>
            </el-table-column>
          </template>
        </el-table>
    </div>
    <div class="pages-box">
      <pagination v-show="tableData.total > 0" :total="tableData.total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
    </div>
    <!-- 表头设置 -->
    <editTableHeader ref="editTableHeader" @save="headerSave"></editTableHeader>
    <!-- 导出弹窗 -->
    <el-dialog title="导出商品流转明细表" :visible.sync="showExport" width="960px" center>
      <div class="export-box ">
        <div class="tip">
          请选择你要导出的内容，拖动可调整顺序！
        </div>
        <div class="check-all flex">
          <span :class="{select:isCheckAll}" class="drag-item" @click="clickAll">
            <b>全选</b>
            <i class="el-icon-success"></i>
          </span>
          <span style="color: #6c5dd3;padding: 5px;cursor: pointer;" @click="defaultCheck">
            使用表头设置
          </span>
        </div>
        <draggable class="drag-box" v-model="exportColumnList"  forceFallback="true"  animation="300" >
          <div class="drag-item " @click="dragItemClick(item)" :class="{select:item.check}" v-for="(item,index) in exportColumnList" :key="index">
            {{ item. label}}
            <i class="el-icon-success"></i>
          </div>
        </draggable>
        <div class="btn_box center">
          <el-button type="primary" @click="exportExl">确认导出</el-button>
        </div>
      </div>
    </el-dialog>

  
  </div>
</template>

<script>
//导入draggable组件
import draggable from "vuedraggable";
import {
  listByBackClueOrder,
  listByBackClueOrderExport,
  listByGoodsInfo,
  listByByGoodsInfoExport,
  listBySaleOrder,
  listBySaleOrderExport,
} from "../../api/dmgt";
import supplyConfigApi from "@/api/system/supplyConfig";
import otherChannels from "@/api/retrieveManage/otherChannels";
import { getUserListHeaderByType } from "../../api/tableHeader";
import { backToGoodsToSaleHeaderList } from "../../utils/tableHeaders";
import editTableHeader from "../../components/common/editTableHeader.vue";
export default {
  name: "GoodsCirculationTable",
  components: {editTableHeader,draggable},
  data() {
    return {
      showExport:false,
      columnList:[],
      exportColumnList:[],
      isCheckAll:false,
      huishouCreatTimer: [],
      saleCreatTimer: [],
      saleFinishTimer: [],
      goodsCreatTimer:[],
      // 提号时间，商品ID 游戏类型 区服 实名状态   游戏账号【对应的商品链接】
      tableData: {
        records: [],
        total: 0,
      },
      loading: false,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        // 回收
        buyerTenantId: "",
        orderType: "",
        orderStatus: "",
        buyerIdList: [],
        channel: "",
        no: "",
        otherNo: "",
        accountNumber: "",
        gameId: "",
        // 商品
        saleState:'',
        tenantId: "",
        createIds: [],
        id: "",
        thirdId: "",
        unsoldDays: "",
        ifself: "",
        // 销售
        salePay: "",
        saleChannel: "",
        saleUserId: "",
        no: "",
        // 额外
        gSaleState:'',
        sOrderStatus:''
      },

      actived: 1,

      yuangongList: [],
      qudaoList: [],

      huishouStatesMap: {
        1: {
          label: "交易中",
          type: "",
        },
        // 2: {
        //   label: "待审核",
        //   type: "warning",
        // },
        // 3: {
        //   label: "已审核",
        //   type: "success",
        // },
        4: {
          label: "交易完成",
          type: "success",
        },
        5: {
          label: "交易失败",
          type: "danger",
        },
      },
    };
  },
  computed: {
    tenantList() {
      return this.$store.getters.tenantList;
    },
    allGameList() {
      return this.$store.getters.allGameList;
    },
  },

  created() {
    this.getTableHeader()
    this.getList();
    this.getQudaoList();
    this.getYuangongList();
  },
  activated() {},
  methods: {
    // 打开表头设置
    headerSet() {
      this.$refs.editTableHeader.open(4);
    },
     // 查询表头
     getTableHeader() {
      getUserListHeaderByType({ type: 4 }).then((res) => {
        if (res.data && res.data.settingsJson) {
          const temp = JSON.parse(res.data.settingsJson);
          this.columnList = this.setDefaultSelect(temp)
        } else {
          this.columnList = [...backToGoodsToSaleHeaderList];
        }
        
        this.exportColumnList = JSON.parse(JSON.stringify(this.columnList))
        this.exportColumnList.forEach(r=>{
          r.check = r.isShow
        })
      });
    },
    // 校验表头 合并默认值和已设置表头
    setDefaultSelect(setCols) {
      if (
        setCols &&
        setCols.length
      ) {
        const setColsMap = this.arrayToObject(setCols,'key')
        const newArr = [];
        backToGoodsToSaleHeaderList.forEach((r) => {
          if(!setColsMap[r.key]){
            //默认存在，已设置不存在的；加到列表
            newArr.push({ ...r });
          }
        });
        return setCols.concat(newArr)
      }
    },
     // headerSave
     headerSave(listJson) {
      this.columnList = [];
      this.$nextTick(() => {
        this.columnList = JSON.parse(listJson);
        // this.exportColumnList = JSON.parse(JSON.stringify(this.columnList))
        // this.exportColumnList.forEach(r=>{
        //   r.check = r.isShow
        // })

        this.$nextTick(() => {
          this.$refs.tableRef.doLayout();
        });
      });
      // this.getTableHeader();
    },
    // tabs切换时触发
    tabChange(e) {
      this.tableData.records = [];
      this.tableData.total = 0;
      this.resetQuery();
    },
    // 获取列表
    getList() {
      let doFn = listByBackClueOrder;
      if (this.actived == 2) {
        doFn = listByGoodsInfo;
      }
      if (this.actived == 3) {
        doFn = listBySaleOrder;
      }
      if(this.actived==1){
        if (this.huishouCreatTimer && this.huishouCreatTimer.length) {
          this.queryParams.createTimeStart = this.huishouCreatTimer[0];
          this.queryParams.createTimeEnd =
            this.huishouCreatTimer[1] + " " + "23:59:59";
        } else {
          this.queryParams.createTimeStart = "";
          this.queryParams.createTimeEnd = "";
        }
      }
      
      // 商品发布时间段
      if(this.actived==2){
        if (this.goodsCreatTimer && this.goodsCreatTimer.length) {
          this.queryParams.createTimeStart = this.goodsCreatTimer[0];
          this.queryParams.createTimeEnd = this.goodsCreatTimer[1] + " " + "23:59:59";
        } else {
          this.queryParams.createTimeStart = "";
          this.queryParams.createTimeEnd = "";
        }
      }
      
      // 销售订单 时间段
      // 创建时间
      if(this.actived==3){
        if (this.saleCreatTimer && this.saleCreatTimer.length) {
          this.queryParams.createTimeStart = this.saleCreatTimer[0];
          this.queryParams.createTimeEnd = this.saleCreatTimer[1] + " " + "23:59:59";
        } else {
          this.queryParams.createTimeStart = "";
          this.queryParams.createTimeEnd = "";
        }
      }
     
      //完成时间
      if (this.saleFinishTimer && this.saleFinishTimer.length) {
        this.queryParams.finishTimeStart = this.saleFinishTimer[0];
        this.queryParams.finishTimeEnd =this.saleFinishTimer[1].length>10?this.saleFinishTimer[1]: (this.saleFinishTimer[1] + " " + "23:59:59");
      } else {
        this.queryParams.finishTimeStart = "";
        this.queryParams.finishTimeEnd = "";
      }
      this.loading = true;
      doFn(this.queryParams)
        .then((res) => {
          this.loading = false;
          this.tableData.records = res.rows;
          this.tableData.total = res.total;
        })
        .catch((err) => {
          this.loading = false;
        });
    },
    // 搜索
    searchList() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    // 打开导出弹窗
    openExportExl(){
      // 
      this.isCheckAllFn()
      this.showExport = true
    },
    // 全选导出字段
    clickAll(){
      this.isCheckAll = !this.isCheckAll
      if(this.isCheckAll){
        this.exportColumnList.forEach(r=>{
          r.check = true
        })
      }else{
        this.exportColumnList.forEach(r=>{
          r.check = false
        })
      }
      this.$forceUpdate()
    },
    // 点击字段
    dragItemClick(item){
      item.check = !item.check
      this.isCheckAllFn()
    },
    // 恢复默认选择
    defaultCheck(){
      this.exportColumnList = JSON.parse(JSON.stringify(this.columnList))
      this.exportColumnList.forEach(r=>{
        r.check = r.isShow
      })
      this.isCheckAllFn()
    },
    // 校验全选
    isCheckAllFn(){
      let isAll = true
      this.exportColumnList.forEach(r=>{
        if(!r.check){
          isAll = false
        }
      })
      this.isCheckAll = isAll
      this.$forceUpdate()
    },
    // 导出
    exportExl() {
      
      let doFn = listByBackClueOrderExport;
      let name = "商品流转明细-回收订单";
      if (this.actived == 2) {
        doFn = listByByGoodsInfoExport;
        name = "商品流转明细-库存商品";
      }
      if (this.actived == 3) {
        doFn = listBySaleOrderExport;
        name = "商品流转明细-销售订单";
      }
      let includePropsStr = ''
      let checkArr = []
      if(!this.isCheckAll){
        // 没有全选 遍历出选择项;全选的无需处理
        this.exportColumnList.forEach(r=>{
          if(r.check){
            checkArr.push(r.key)
          }
        })
        if(checkArr&&checkArr.length){
          includePropsStr = checkArr.join(',')
        }else{
          return this.$message.error('请选择要导出的内容！')
        }
      }
      // 处理时间段
      if(this.actived==1){
        if (this.huishouCreatTimer && this.huishouCreatTimer.length) {
          this.queryParams.createTimeStart = this.huishouCreatTimer[0];
          this.queryParams.createTimeEnd =
            this.huishouCreatTimer[1] + " " + "23:59:59";
        } else {
          this.queryParams.createTimeStart = "";
          this.queryParams.createTimeEnd = "";
        }
      }
      
      // 商品发布时间段
      if(this.actived==2){
        if (this.goodsCreatTimer && this.goodsCreatTimer.length) {
          this.queryParams.createTimeStart = this.goodsCreatTimer[0];
          this.queryParams.createTimeEnd = this.goodsCreatTimer[1] + " " + "23:59:59";
        } else {
          this.queryParams.createTimeStart = "";
          this.queryParams.createTimeEnd = "";
        }
      }
      
      // 销售订单 时间段
      // 创建时间
      if(this.actived==3){
        if (this.saleCreatTimer && this.saleCreatTimer.length) {
          this.queryParams.createTimeStart = this.saleCreatTimer[0];
          this.queryParams.createTimeEnd = this.saleCreatTimer[1] + " " + "23:59:59";
        } else {
          this.queryParams.createTimeStart = "";
          this.queryParams.createTimeEnd = "";
        }
      }
     
      //完成时间
      if (this.saleFinishTimer && this.saleFinishTimer.length) {
        this.queryParams.finishTimeStart = this.saleFinishTimer[0];
        this.queryParams.finishTimeEnd =this.saleFinishTimer[1].length>10?this.saleFinishTimer[1]: (this.saleFinishTimer[1] + " " + "23:59:59");
      } else {
        this.queryParams.finishTimeStart = "";
        this.queryParams.finishTimeEnd = "";
      }
      this.loading = true;
      doFn({
        ...this.queryParams,
        includePropsStr:includePropsStr,
        pageNum:null,
        pageSize:null
      })
        .then((res) => {
          this.$download.downloadFile(res, name + "-");
          this.loading = false;
          this.showExport = false
          this.$message.success('导出成功！请在下载目录中查看！')
        })
        .catch((err) => {
          this.loading = false;
        });
    },

    resetQuery() {
      this.huishouCreatTimer = []
      this.saleCreatTimer= []
      this.saleFinishTimer= []
      this.goodsCreatTimer = []
      this.resetForm("queryForm");
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        // 回收
        orderStatus: "",
        buyerTenantId: "",
        orderType: "",
        buyerIdList: [],
        channel: "",
        no: "",
        accountNumber: "",
        gameId: "",
        // 商品
        saleState:'',
        tenantId: "",
        gameId: "",
        createIds: [],
        id: "",
        accountNumber: "",
        thirdId: "",
        unsoldDays: "",
        ifself: "",
        // 销售
        orderType: "",
        salePay: "",
        saleChannel: "",
        saleUserId: "",
        no: "",
        otherNo:'',
        // 额外
        gSaleState:'',
        sOrderStatus:''
      }
      this.searchList();
    },

    // // 获取自定义的三方渠道列表
    getQudaoList() {
      otherChannels
        .getQudaoList({
          isPage: 2,
          type: 2,
        })
        .then((response) => {
          this.qudaoList = response.rows;
        });
    },
    // 获取所有员工列表
    getYuangongList() {
      supplyConfigApi
        .getAllUserList({
          userNewType: 1,
        })
        .then((res) => {
          this.yuangongList = res.rows;
        });
    },

    exportOrder() {},
  },
};
</script>
<style lang="scss" scoped>
.export-box{
  .tip{
    font-size: 15px;
    color: #f54c4c;
  }
  .drag-box{
    display: flex;
    flex-wrap: wrap;
  }
  .check-all{
    margin-top: 15px;
  }
  .drag-item{
    width: 120px;
    padding: 5px 0;
    border: 1px solid #8f84d4;
    border-radius: 4px;
    margin: 0 10px 10px 0;
    cursor: pointer;
    user-select: none;
    position: relative;
    text-align: center;
    i{
      position: absolute;
      top: -5px;
      right: -5px;
      display: none;
    }
    &.select{
      background-color: #d0caf7;
      color: #6857d4;
      i{
        font-size: 16px;
        color: $primary;
        display:block;
      }
    }
  }
}

.popover-box{
  max-width: 800px;max-height: 400px;overflow-y: auto;
  white-space: pre-wrap;
}
.table_box{
  ::v-deep .backCol{
    background-color: #fff5ee ;
  }
  ::v-deep .goodsCol{
    background-color: #f7f7fd ;
  }
  ::v-deep .saleCol{
    background-color: #f5fffb ;
  }
  // ::v-deep tr.el-table__row--striped td.backCol.el-table__cell{
  //     background-color: #fcf6f2 ;
  // }
  // ::v-deep tr.el-table__row--striped td.saleCol.el-table__cell{
  //   background-color: #f6fcf9 ;
  // }
  // ::v-deep tr.el-table__row--striped td.goodsCol.el-table__cell{
  //   background-color: #f6f6fa ;
  // }
  ::v-deep .el-table__row:hover td.backCol.el-table__cell{
    background-color: #feebeb !important;
  }
  ::v-deep .el-table__row:hover td.goodsCol.el-table__cell{
    background-color: #feebeb !important;
  }
  ::v-deep .el-table__row:hover td.saleCol.el-table__cell{
    background-color: #feebeb !important;
  }
}
</style>
